Spracherkennung mit integrierter KI

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Thomas Steiner

Veröffentlicht: 24. September 2024, letzte Aktualisierung: 20. Mai 2025

Erklärvideo	Web	Erweiterungen	Chrome-Status	Absicht
MDN	Chrome 138 Beta	Chrome 138 Beta	Ansicht	Versandabsicht

Bevor Sie Text von einer Sprache in eine andere übersetzen, müssen Sie zuerst ermitteln, welche Sprache im jeweiligen Text verwendet wird. Bisher musste der Text für die Übersetzung in einen Cloud-Dienst hochgeladen, auf dem Server übersetzt und dann heruntergeladen werden.

Die Language Detector API ist clientseitig, sodass Sie die Privatsphäre der Nutzer schützen können. Es ist zwar möglich, eine bestimmte Bibliothek zu verwenden, die dies tut, aber das würde zusätzliche Ressourcen für den Download erfordern.

Wann sollte die Spracherkennung verwendet werden?

Die Language Detector API ist in folgenden Szenarien besonders nützlich:

• Die Sprache des Eingabetexts wird ermittelt, damit er übersetzt werden kann.
• Die Sprache des Eingabetexts wird ermittelt, damit das richtige Modell für sprachspezifische Aufgaben wie die Erkennung schädlicher Sprache geladen werden kann.
• Die Sprache des Eingabetexts wird ermittelt, damit er beispielsweise in Online-Sozialen Netzwerken richtig gekennzeichnet werden kann.
• Die Sprache des Eingabetexts wird ermittelt, damit die Benutzeroberfläche einer App entsprechend angepasst werden kann. So können Sie beispielsweise auf einer belgischen Website nur die Benutzeroberfläche anzeigen, die für französischsprachige Nutzer relevant ist.

Jetzt starten

Die Language Detector API ist ab Chrome 138 (stabile Version) verfügbar. Führen Sie die Feature-Erkennung aus, um zu prüfen, ob der Browser die Language Detector API unterstützt.

if ('LanguageDetector' in self) {
  // The Language Detector API is available.
}

Download des Modells

Die Spracherkennung basiert auf einem Modell, das für die spezifische Aufgabe der Spracherkennung optimiert ist. Die API ist im Browser eingebunden, das Modell wird jedoch on-demand heruntergeladen, wenn eine Website zum ersten Mal versucht, die API zu verwenden. In Chrome ist dieses Modell im Vergleich zu anderen Modellen sehr klein. Möglicherweise ist es bereits vorhanden, da dieses Modell von anderen Chrome-Funktionen verwendet wird.

Rufen Sie die asynchrone Funktion LanguageDetector.availability() auf und prüfen Sie das resultierende Promise, um zu sehen, ob das Modell einsatzbereit ist. Es gibt drei mögliche Antworten:

• "unavailable": Die angeforderten Optionen werden nicht unterstützt oder das Modell kann nicht aufgefordert werden.
• "downloadable": Die Anfrage wird unterstützt, aber es sind zusätzliche Downloads erforderlich, bevor Sie eine Sitzung erstellen können. Diese Downloads können das Sprachmodell oder die Feinabstimmung umfassen.
• "downloading": Die Anfrage wird unterstützt und ein Download ist in Bearbeitung. Er muss abgeschlossen sein, bevor eine Sitzung erstellt werden kann.
• "available": Die Anfrage wird unterstützt und Sie können eine Sitzung erstellen.

Rufen Sie die asynchrone Funktion LanguageDetector.create() auf, um den Download auszulösen und den Sprachdetektor zu instanziieren. Wenn die Antwort auf availability() 'downloadable' oder 'downloading' war, solltest du den Downloadfortschritt im Blick behalten, damit du den Nutzer informieren kannst, falls der Download länger dauert.

Im folgenden Beispiel wird gezeigt, wie der Sprachdetektor initialisiert wird.

const availability = await LanguageDetector.availability();

let detector;
if (availability === 'unavailable') {
  // The language detector isn't usable.
  return;
}
if (availability === 'available') {
  // The language detector can immediately be used.
  detector = await LanguageDetector.create();
} else {
  // The language detector can be used after model download.
  detector = await LanguageDetector.create({
    monitor(m) {
      m.addEventListener('downloadprogress', (e) => {
        console.log(`Downloaded ${e.loaded * 100}%`);
      });
    },
  });
  await detector.ready;
}

Spracherkennung ausführen

Die Language Detection API verwendet ein Ranking-Modell, um zu ermitteln, welche Sprache in einem bestimmten Text am wahrscheinlichsten verwendet wird. Das Ranking ist eine Art von maschinellem Lernen, bei dem eine Liste von Elementen sortiert werden soll. In diesem Fall sortiert die Language Detector API die Sprachen nach der höchsten Wahrscheinlichkeit.

Die Funktion detect() kann entweder das erste Ergebnis, die wahrscheinlichste Antwort, zurückgeben oder die sortierten Kandidaten mit dem Konfidenzniveau durchgehen. Diese werden als Liste von {detectedLanguage, confidence}-Objekten zurückgegeben. Das confidence-Level wird als Wert zwischen 0.0 (niedrigste Sicherheit) und 1.0 (höchste Sicherheit) ausgedrückt.

const someUserText = 'Hallo und herzlich willkommen!';
const results = await detector.detect(someUserText);
for (const result of results) {
  // Show the full list of potential languages with their likelihood, ranked
  // from most likely to least likely. In practice, one would pick the top
  // language(s) that cross a high enough threshold.
  console.log(result.detectedLanguage, result.confidence);
}
// (Output truncated):
// de 0.9993835687637329
// en 0.00038279531872831285
// nl 0.00010798392031574622
// ...

API-Testfeld

Probieren Sie die Language Detector API in unserem API Playground aus. Geben Sie in das Textfeld Text in verschiedenen Sprachen ein.

Standardisierungsaufwand

Das Chrome-Team hat Feedback von der W3C Technical Architecture Group angefordert und Mozilla und WebKit um ihre Positionierung zu den Standards gebeten.

Feedback geben

Wir möchten sehen, was Sie mit der Language Detector API erstellen. Teilen Sie uns Ihre Websites und Webanwendungen auf X, YouTube und LinkedIn mit.

Wenn Sie Feedback zur Implementierung in Chrome haben, können Sie einen Chromium-Fehler melden.